<template>
  <view class="flex-1">
    <customNav title="合作咨询"></customNav>
    <view class="flex flex-col">
      <view class="bg-header flex flex-col justify-center items-center">
        <view class="text-black text-[48rpx] leading-6 text-center"
          >合作咨询</view
        >
        <view class="text-[#7B7B7B] text-xs leading-6 text-center mt-1"
          >Cooperative Consultation</view
        >
      </view>
      <view class="px-5 mt-[-200rpx]">
        <view class="bg-white rounded-xl p-5">
          <view class="mb-[30rpx]">
            <view class="pb-[20rpx] text-[#4B535A] text-base">公司名称</view>
            <up-input
              :customStyle="customStyle"
              placeholder="请输入公司名称"
              border="surround"
              clearable
              v-model="form.company_name"
            ></up-input>
          </view>
          <view class="mb-[30rpx]">
            <view class="pb-[20rpx] text-[#4B535A] text-base">联系人姓名</view>
            <up-input
              :customStyle="customStyle"
              placeholder="请输入联系人姓名"
              border="surround"
              clearable
              v-model="form.contactor"
            ></up-input>
          </view>
          <view class="mb-[30rpx]">
            <view class="pb-[20rpx] text-[#4B535A] text-base">联系电话</view>
            <up-input
              type="number"
              :customStyle="customStyle"
              placeholder="请输入联系电话"
              border="surround"
              clearable
              v-model="form.phone"
            ></up-input>
          </view>
          <view class="mb-[152rpx]">
            <view class="pb-[20rpx] text-[#4B535A] text-base">邮箱</view>
            <up-input
              :customStyle="customStyle"
              placeholder="请输入邮箱"
              border="surround"
              clearable
              v-model="form.email"
            ></up-input>
          </view>
        </view>
      </view>
      <view class="w-full px-5 pt-10 pb-[40rpx]">
        <view
          @click="submit"
          class="bg-theme rounded w-full font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
        >
          提交合作申请
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { saveCoop_api } from "@/api/user";
import { ref, reactive, computed } from "vue";
import { onPageScroll } from "@dcloudio/uni-app";
onPageScroll((e) => {});
const customStyle = computed(() => ({
  height: "84rpx",
}));
const form = reactive({
  company_name: "",
  contactor: "",
  phone: "",
  email: "",
});

const submit = () => {
  if (!form.company_name)
    return uni.showToast({ title: "请输入公司名称", icon: "none" });
  if (!form.contactor)
    return uni.showToast({ title: "请输入联系人姓名", icon: "none" });
  if (!form.phone)
    return uni.showToast({ title: "请输入联系电话", icon: "none" });
  if (form.phone && !uni.$u.test.mobile(form.phone))
    return uni.showToast({ title: "请输入正确的手机号", icon: "none" });
  if (form.email && !uni.$u.test.email(form.email))
    return uni.showToast({ title: "请输入正确的邮箱号", icon: "none" });
  uni.showLoading();
  saveCoop_api(form).then(() => {
    uni.showModal({
      title: "温馨提示",
      content: "提交成功",
      showCancel: false,
      success: () => {
        uni.navigateBack();
      },
    });
  });
};
</script>

<style lang="scss" scoped>
.bg-header {
  background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/zixun-bg.png");
  width: 100%;
  height: 676rpx;
  background-size: 100% 100%;
}
:deep(.u-border) {
  border-color: #eceff4 !important;
}
</style>
